<template>
  <div class="lowcode-board">
    <div class="title">{{ nowData.showTitle ? formatTitle(nowData.showTitle) : nowData.title }}</div>
    <div class="number">流程编号：{{ nowData.number }}</div>

		<div class="border" v-for="(row, i) in nowData.fields" :key="i">
			<template v-if="row.length == 1">
				<div class="row" v-for="item in row" :key="item.ofdid">
					<div class="left border-right">{{item.title}}</div>
					<div class="right">
            <FormFields :fields="item" :type="type" />
          </div>
				</div>
			</template>

			<div class="row" v-else>
				<div class="row" v-for="(item, index) in row" :key="item.ofdid">
					<div class="left border-right" :class="{'border-left': index > 0}">{{item.title}}</div>
					<div class="right">
						<FormFields :fields="item" :type="type" />
					</div>
				</div>
			</div>
		</div>

  </div>
</template>

<script>
import FormFields from './FormFields'
export default {
  name: 'FormBoard',
  components: {
    FormFields
  },
  props: {
    formData: {
      default: () => {
        return {
          title: '',
          number: '',
          fields: [],
        }
      },
    },
    type: {
      // 1 默认展示可以操作， 2 用户需要操作  3只读模式
      default: 1
    }
  },

  watch: {
    formData: {
      handler (val) {
        if (this.type == 1) {
          this.nowData = JSON.parse(JSON.stringify(val))
        } else {
          this.nowData = val
        }
      },
      deep: true,
      immediate: true,
    },

    nowData: {
      handler (val) {
        if (this.type == 2) {
          this.$emit('content', val)
        }
      },

      deep: true,
      immediate: true
    }
  },

  data () {
    return {
      nowData: {
        title: '',
        number: '',
        fields: [],
      },
    }
  },
  methods: {
    formatTitle (title) {
      let arr = title.split('-')
      return arr[0]
    }
  },
  created () {
    
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 28px;
  font-weight: 500;
  color: #262a30;
  margin-bottom: 8px;
  text-align: center;
}
.number {
  color: #262a30;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: right;
}

.border {
	border-top: 1px solid #AEDAFC;
	border-left: 1px solid #AEDAFC;
	border-right: 1px solid #AEDAFC;
	&:last-child {
		border-bottom: 1px solid #AEDAFC;
	}
}

.border-right {
	border-right: 1px solid #AEDAFC;
}

.border-left {
	border-left: 1px solid #AEDAFCed;
}
.row {
	display: flex;
	flex: 1;
	.left {
		max-width: 160px;
		min-width: 160px;
		// height: 40px;
		background: #ebf5ff;
		font-weight: 500;
		color: #262a30;
		display: flex;
		align-items: center;
    padding: 10px 16px;

	}

	.right {
		padding: 0 16px;
	  color: #262a30;
		width: 100%;
		display: flex;
		align-items: center;
    padding: 4px 8px;
	}
}


// .left {
//   padding: 0 16px;
//   color: #262a30;
// 	width: 100%;
// }

// td,
// th {
//   border: 1px solid #aedafc;
//   font-size: 14px;
// }

// .table {
//   width: 100%;
// }
</style>
